<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户面板 | 代码狂想</title>
    <style>
        /* 基础样式与野蛮主义风格 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            background-color: #f0f0f0;
            color: #222;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 野蛮主义风格特点：粗体、不对称、高对比度 */
        header {
            background-color: #000;
            color: #fff;
            padding: 30px;
            margin-bottom: 30px;
            border: 5px solid #ff0066;
            position: relative;
        }

        h1 {
            font-size: 4rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: -2px;
            line-height: 1;
        }

        .tagline {
            font-size: 1.5rem;
            margin-top: 10px;
            color: #ff0066;
        }

        /* 导航样式 - 保持原始链接外观但放大 */
        nav {
            background-color: #ff0066;
            padding: 15px;
            margin-bottom: 30px;
        }

        nav ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
        }

        nav li {
            margin-right: 30px;
        }

        nav a {
            color: #000;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.2rem;
            padding: 5px 10px;
            background-color: #fff;
        }

        nav a:hover {
            background-color: #000;
            color: #fff;
        }

        /* 用户面板容器 */
        .dashboard-container {
            display: grid;
            grid-template-columns: 1fr 3fr;
            gap: 30px;
            margin-bottom: 30px;
        }

        /* 用户信息侧边栏 */
        .user-sidebar {
            background-color: #000;
            color: #fff;
            padding: 25px;
            border: 3px solid #ff0066;
        }

        .user-info {
            text-align: center;
            margin-bottom: 30px;
        }

        .user-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #ff0066;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            font-weight: bold;
        }

        .user-name {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .user-role {
            color: #ff0066;
            font-style: italic;
            margin-bottom: 15px;
        }

        .user-stats {
            display: flex;
            justify-content: space-around;
            margin-bottom: 30px;
        }

        .stat-item {
            text-align: center;
        }

        .stat-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: #ff0066;
        }

        .stat-label {
            font-size: 0.8rem;
        }

        .user-menu {
            list-style: none;
        }

        .user-menu li {
            margin-bottom: 10px;
        }

        .user-menu a {
            display: block;
            padding: 10px;
            background-color: #333;
            color: #fff;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        .user-menu a:hover {
            background-color: #ff0066;
            color: #000;
        }

        .user-menu a.active {
            background-color: #ff0066;
            color: #000;
        }

        /* 主要内容区域 */
        .dashboard-main {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
        }

        /* 仪表板卡片样式 */
        .dashboard-card {
            background-color: #fff;
            padding: 25px;
            border: 3px solid #000;
            box-shadow: 8px 8px 0 #000;
        }

        .dashboard-card h2 {
            font-size: 2rem;
            margin-bottom: 20px;
            color: #ff0066;
            border-bottom: 2px solid #000;
            padding-bottom: 10px;
        }

        /* 文章列表样式 */
        .article-list {
            list-style: none;
        }

        .article-item {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }

        .article-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .article-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .article-title a {
            color: #222;
            text-decoration: none;
        }

        .article-title a:hover {
            color: #ff0066;
        }

        .article-meta {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 10px;
        }

        .article-excerpt {
            margin-bottom: 10px;
        }

        .article-actions {
            display: flex;
            gap: 10px;
        }

        .btn {
            display: inline-block;
            padding: 5px 10px;
            background-color: #000;
            color: #fff;
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: bold;
        }

        .btn:hover {
            background-color: #ff0066;
        }

        /* 评论列表样式 */
        .comment-list {
            list-style: none;
        }

        .comment-item {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }

        .comment-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .comment-article {
            font-weight: bold;
        }

        .comment-article a {
            color: #222;
            text-decoration: none;
        }

        .comment-article a:hover {
            color: #ff0066;
        }

        .comment-date {
            color: #666;
            font-size: 0.9rem;
        }

        .comment-content {
            margin-bottom: 10px;
        }

        /* 设置表单样式 */
        .settings-form .form-group {
            margin-bottom: 20px;
        }

        .settings-form label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .settings-form input,
        .settings-form textarea,
        .settings-form select {
            width: 100%;
            padding: 10px;
            border: 2px solid #000;
            font-family: inherit;
        }

        .settings-form input:focus,
        .settings-form textarea:focus,
        .settings-form select:focus {
            outline: none;
            border-color: #ff0066;
            box-shadow: 0 0 0 2px rgba(255, 0, 102, 0.3);
        }

        .settings-form textarea {
            min-height: 100px;
        }

        .form-actions {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }

        .btn-primary {
            background-color: #000;
            color: #fff;
            padding: 10px 20px;
            border: none;
            font-weight: bold;
            cursor: pointer;
        }

        .btn-primary:hover {
            background-color: #ff0066;
        }

        .btn-secondary {
            background-color: #fff;
            color: #000;
            padding: 10px 20px;
            border: 2px solid #000;
            font-weight: bold;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
        }

        .btn-secondary:hover {
            background-color: #000;
            color: #fff;
        }

        /* 野蛮主义风格的特色元素 */
        .brutal-element {
            height: 10px;
            background-color: #ff0066;
            margin: 20px 0;
        }

        footer {
            background-color: #000;
            color: #fff;
            padding: 30px;
            text-align: center;
            margin-top: 30px;
            border-top: 5px solid #ff0066;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .dashboard-container {
                grid-template-columns: 1fr;
            }

            h1 {
                font-size: 2.5rem;
            }

            nav ul {
                flex-direction: column;
            }

            nav li {
                margin-bottom: 10px;
            }

            .user-stats {
                flex-direction: column;
                gap: 15px;
            }

            .form-actions {
                flex-direction: column;
            }
        }
    </style>
</head>

<body>
    <header>
        <h1>代码狂想</h1>
        <p class="tagline">原始 · 直接 · 不妥协的技术思考</p>
    </header>

    <nav>
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="#">前端开发</a></li>
            <li><a href="#">后端架构</a></li>
            <li><a href="#">算法与数据结构</a></li>
            <li><a href="#">设计模式</a></li>
            <li><a href="about.html">关于</a></li>
            <li><a href="dashboard.html">用户面板</a></li>
            <li><a href="login.html">退出</a></li>
        </ul>
    </nav>

    <div class="dashboard-container">
        <aside class="user-sidebar">
            <div class="user-info">
                <div class="user-avatar">C</div>
                <div class="user-name">代码狂人</div>
                <div class="user-role">高级会员</div>
            </div>

            <div class="user-stats">
                <div class="stat-item">
                    <div class="stat-value">42</div>
                    <div class="stat-label">文章</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">128</div>
                    <div class="stat-label">收藏</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">67</div>
                    <div class="stat-label">评论</div>
                </div>
            </div>

            <ul class="user-menu">
                <li><a href="#overview" class="active">概览</a></li>
                <li><a href="#articles">我的文章</a></li>
                <li><a href="#favorites">收藏文章</a></li>
                <li><a href="#comments">我的评论</a></li>
                <li><a href="#settings">账户设置</a></li>
            </ul>
        </aside>

        <main class="dashboard-main">
            <!-- 概览部分 -->
            <section id="overview" class="dashboard-card">
                <h2>欢迎回来，代码狂人！</h2>
                <p>这是您的个人仪表板，您可以在这里管理您的文章、收藏和账户设置。</p>

                <div class="brutal-element"></div>

                <h3>最近活动</h3>
                <ul class="article-list">
                    <li class="article-item">
                        <div class="article-title"><a href="detail.html">您收藏了文章：野蛮主义在Web设计中的复兴</a></div>
                        <div class="article-meta">2023年10月18日</div>
                    </li>
                    <li class="article-item">
                        <div class="article-title"><a href="detail.html">您评论了文章：JavaScript引擎优化技巧</a></div>
                        <div class="article-meta">2023年10月17日</div>
                    </li>
                    <li class="article-item">
                        <div class="article-title"><a href="detail.html">您发布了新文章：React Hooks最佳实践</a></div>
                        <div class="article-meta">2023年10月15日</div>
                    </li>
                </ul>
            </section>

            <!-- 我的文章部分 -->
            <section id="articles" class="dashboard-card" style="display: none;">
                <h2>我的文章</h2>
                <ul class="article-list">
                    <li class="article-item">
                        <div class="article-title"><a href="detail.html">React Hooks最佳实践</a></div>
                        <div class="article-meta">发布于 2023年10月15日 · 前端开发 · 12分钟阅读</div>
                        <div class="article-excerpt">深入探讨React Hooks的使用技巧和常见陷阱，帮助您编写更高效、可维护的React组件。</div>
                        <div class="article-actions">
                            <a href="#" class="btn">编辑</a>
                            <a href="#" class="btn">删除</a>
                            <a href="detail.html" class="btn">查看</a>
                        </div>
                    </li>
                    <li class="article-item">
                        <div class="article-title"><a href="detail.html">Node.js性能优化指南</a></div>
                        <div class="article-meta">发布于 2023年10月10日 · 后端架构 · 15分钟阅读</div>
                        <div class="article-excerpt">从事件循环到内存管理，全面解析Node.js性能优化的关键技巧。</div>
                        <div class="article-actions">
                            <a href="#" class="btn">编辑</a>
                            <a href="#" class="btn">删除</a>
                            <a href="detail.html" class="btn">查看</a>
                        </div>
                    </li>
                    <li class="article-item">
                        <div class="article-title"><a href="detail.html">CSS Grid布局完全指南</a></div>
                        <div class="article-meta">发布于 2023年10月5日 · 前端开发 · 20分钟阅读</div>
                        <div class="article-excerpt">掌握CSS Grid布局的核心概念和实用技巧，创建复杂的响应式布局。</div>
                        <div class="article-actions">
                            <a href="#" class="btn">编辑</a>
                            <a href="#" class="btn">删除</a>
                            <a href="detail.html" class="btn">查看</a>
                        </div>
                    </li>
                </ul>
            </section>

            <!-- 收藏文章部分 -->
            <section id="favorites" class="dashboard-card" style="display: none;">
                <h2>收藏文章</h2>
                <ul class="article-list">
                    <li class="article-item">
                        <div class="article-title"><a href="detail.html">野蛮主义在Web设计中的复兴</a></div>
                        <div class="article-meta">作者: 代码狂人 · 发布于 2023年10月15日 · 前端设计</div>
                        <div class="article-excerpt">新野蛮主义设计风格是对过度设计、用户界面同质化的反击。它拥抱原始HTML的本来面貌，使用高对比度色彩和大胆的排版...</div>
                        <div class="article-actions">
                            <a href="#" class="btn">取消收藏</a>
                            <a href="detail.html" class="btn">阅读</a>
                        </div>
                    </li>
                    <li class="article-item">
                        <div class="article-title"><a href="detail.html">JavaScript引擎优化技巧</a></div>
                        <div class="article-meta">作者: 算法猎人 · 发布于 2023年10月10日 · JavaScript</div>
                        <div class="article-excerpt">现代JavaScript引擎已经非常智能，但了解其内部工作原理仍然可以帮助我们编写更高效的代码...</div>
                        <div class="article-actions">
                            <a href="#" class="btn">取消收藏</a>
                            <a href="detail.html" class="btn">阅读</a>
                        </div>
                    </li>
                    <li class="article-item">
                        <div class="article-title"><a href="detail.html">微服务架构的陷阱与解决方案</a></div>
                        <div class="article-meta">作者: 架构师 · 发布于 2023年10月5日 · 后端架构</div>
                        <div class="article-excerpt">微服务架构在提供灵活性和可扩展性的同时，也带来了分布式系统的复杂性...</div>
                        <div class="article-actions">
                            <a href="#" class="btn">取消收藏</a>
                            <a href="detail.html" class="btn">阅读</a>
                        </div>
                    </li>
                </ul>
            </section>

            <!-- 我的评论部分 -->
            <section id="comments" class="dashboard-card" style="display: none;">
                <h2>我的评论</h2>
                <ul class="comment-list">
                    <li class="comment-item">
                        <div class="comment-header">
                            <div class="comment-article"><a href="detail.html">野蛮主义在Web设计中的复兴</a></div>
                            <div class="comment-date">2023年10月18日</div>
                        </div>
                        <div class="comment-content">
                            <p>完全同意文章观点！现在的网站设计太同质化了，每个人都用相同的模板和组件库。野蛮主义至少让我们看到了不同的可能性。</p>
                        </div>
                        <div class="article-actions">
                            <a href="detail.html" class="btn">查看原文</a>
                            <a href="#" class="btn">删除评论</a>
                        </div>
                    </li>
                    <li class="comment-item">
                        <div class="comment-header">
                            <div class="comment-article"><a href="detail.html">JavaScript引擎优化技巧</a></div>
                            <div class="comment-date">2023年10月17日</div>
                        </div>
                        <div class="comment-content">
                            <p>关于内联缓存的部分很有启发性，我在实际项目中确实遇到过类似的问题。感谢分享这些优化技巧！</p>
                        </div>
                        <div class="article-actions">
                            <a href="detail.html" class="btn">查看原文</a>
                            <a href="#" class="btn">删除评论</a>
                        </div>
                    </li>
                    <li class="comment-item">
                        <div class="comment-header">
                            <div class="comment-article"><a href="detail.html">微服务架构的陷阱与解决方案</a></div>
                            <div class="comment-date">2023年10月16日</div>
                        </div>
                        <div class="comment-content">
                            <p>分布式追踪确实是个大问题，我们团队最近也在研究如何更好地实现微服务间的调用链追踪。</p>
                        </div>
                        <div class="article-actions">
                            <a href="detail.html" class="btn">查看原文</a>
                            <a href="#" class="btn">删除评论</a>
                        </div>
                    </li>
                </ul>
            </section>

            <!-- 账户设置部分 -->
            <section id="settings" class="dashboard-card" style="display: none;">
                <h2>账户设置</h2>
                <form class="settings-form">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" value="代码狂人">
                    </div>
                    <div class="form-group">
                        <label for="email">电子邮箱</label>
                        <input type="email" id="email" value="user@codecraze.blog">
                    </div>
                    <div class="form-group">
                        <label for="bio">个人简介</label>
                        <textarea id="bio">15年全栈开发经验，专注于系统架构和性能优化。坚信简洁的代码是最好的代码。</textarea>
                    </div>
                    <div class="form-group">
                        <label for="notifications">通知设置</label>
                        <select id="notifications">
                            <option value="all">所有通知</option>
                            <option value="important" selected>仅重要通知</option>
                            <option value="none">不接收通知</option>
                        </select>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn-primary">保存更改</button>
                        <a href="reset-password.html" class="btn-secondary">更改密码</a>
                    </div>
                </form>
            </section>
        </main>
    </div>

    <footer>
        <p>代码狂想 &copy; 2023 · 遵循野蛮主义设计原则构建</p>
        <p>联系方式: contact@codecraze.blog</p>
    </footer>

    <script>
        // 导航菜单切换功能
        document.querySelectorAll('.user-menu a').forEach(link => {
            link.addEventListener('click', function (e) {
                e.preventDefault();

                // 移除所有活动状态
                document.querySelectorAll('.user-menu a').forEach(item => {
                    item.classList.remove('active');
                });

                // 添加当前活动状态
                this.classList.add('active');

                // 隐藏所有部分
                document.querySelectorAll('.dashboard-card').forEach(section => {
                    section.style.display = 'none';
                });

                // 显示目标部分
                const targetId = this.getAttribute('href').substring(1);
                document.getElementById(targetId).style.display = 'block';
            });
        });

        // 默认显示概览部分
        document.getElementById('overview').style.display = 'block';
    </script>
</body>

</html>